<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<img id="htmlOverlay" style="position: absolute" src="./img/igs/Cesium_Logo_overlay.png">

<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer');
    // To geographically place an HTML element on top of the Cesium canvas, we use
    // scene.cartesianToCanvasCoordinates to map a world position to canvas x and y values.
    // This example places and img element, but any element will work.

    var htmlOverlay = document.getElementById('htmlOverlay');
    var scratch = new Cesium.Cartesian2();
    viewer.scene.preRender.addEventListener(function() {
        var position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
        var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(position, scratch);
        if (Cesium.defined(canvasPosition)) {
            htmlOverlay.style.top = canvasPosition.y + 'px';
            htmlOverlay.style.left = canvasPosition.x + 'px';
        }
    });

</script>
</body>
</html>